import React from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import ReplayItem from './ReplayItem'
import './roundReplay.less'

const GAME_TYPE = { 'BULLFIGHT': 1, 'OXFIGHT': 2, 'HONGZHONG': 3, 'DIANZINIU': 5, 'JINHUA': 4, 'SANGONG': 6, 'HUACHUAN': 7, 'RUNFAST': 8, 'CSMAHJONG': 10, 'PJMAHJONG': 11 , 'HUZMAHJONG':13, 'SANJINPK': 15, 'NEWRUNFAST': 16, 'QIANFENG': 17}

const GAME_NAME = { 'BULLFIGHT': '经典斗牛', 'OXFIGHT': "斗公牛", 'HONGZHONG': "红中麻将", 'DIANZINIU': "点子牛", 'JINHUA': "欢乐三张", 'SANGONG': "三公", 'HUACHUAN': "平江开船", 'RUNFAST': "跑得快", 'NEWRUNFAST': "新跑得快", 'CSMAHJONG': "长沙麻将", 'PJMAHJONG': "平江扎鸟", 'HUZMAHJONG': "惠州麻将", 'SANJINPK': "三公炸金花", "QIANFENG": "仙桃千分"  }

const SUIT_PATTERN = ["无牛", "牛一", "牛二", "牛三", "牛四", "牛五", "牛六", "牛七", "牛八", "牛九", "牛牛", "银牛", "金牛", "炸弹牛", "五小牛", "顺子牛", "同花牛", "葫芦牛", "同花顺牛"]

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: (msg) => dispatch(global.allActions.appActions.openModal(msg))
  }
}
class RoundReplay extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      gameNo: 1,
      combatList: [],
      loading: false,
      showModal: false,
      tableItem: []
    }
  }

  public componentDidMount() {
    // console.log(this.props.match.params)
    const { gameNo } = this.props.match.params
    this.setState({ gameNo })
    this.queryBattles(gameNo)
  }

  queryBattles(gameNo) {
    const url = `${config.pre}/recordCenter/eachround/${gameNo}`
    const opt = { method: 'GET' }
    this.setState({ loading: true })
    fetchJson(url, opt).then(data => {
      this.setState({ loading: false })
      if (data.result) {
        this.setState({ combatList: [] })
        return
      }
      const combatList = data.data.map(combat => {
        return {
          gameNo: combat.gameNo,
          video: combat.video,
          roundNo: combat.roundNo,
          createTime: util.timeUtil.getDateTime(combat.createTime),
          roundSettleVo: combat.roundSettleVo
        }
      })
      // console.log('combatList', combatList);
      this.setState({ combatList })
    })
  }

  showBattleDetails(battle) {
    const { gameName } = this.props.match.params
    var gameType = GAME_TYPE[gameName]
    gameType = gameType === undefined ? '' : gameType;
    const currentUrl = encodeURIComponent(window.location.href)
    const url = `${config.pre}/recordCenter/roundvideo/${battle.roundNo}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      if (data.result) {
        this.props.openModal(data.message)
      } else {
        this.setState({ tableItem: data.data.videoList[0].settlements, showModal: true })
      }
    })
  }

  toGameBattle(battle) {
    const { gameName } = this.props.match.params
    var gameType = GAME_TYPE[gameName]
    gameType = gameType === undefined ? '' : gameType;
    const currentUrl = encodeURIComponent(window.location.href)
    const url = `${config.pre}/recordCenter/jumpvideo/${Cookies.get('areaCode')}/${gameType}/${battle.roundNo}?backurl=${currentUrl}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      if (data.result) {
        this.props.openModal(data.message)
        return
      }
      window.location.href = `${data.data}&backurl=${currentUrl}`
    })
  }

  public render() {
    const { inviteId, tip, period, combatList, loading } = this.state
    const { userInfo } = this.props
    let showDetail = false;
    let { gameName } = this.props.match.params
    let gameType = GAME_TYPE[gameName]
    if (gameType === 1 || gameType === 2 || gameType === 4) {
      showDetail = true;
    }
    let gameNameCN = encodeURIComponent(GAME_NAME[gameName])
    const toLink = `/BattleDetail/${gameType}/${gameNameCN}`
    return (<div className="view-page battle-view">
      <div className="round-game-top">
      </div>
      <div className="detail-middle round-game-middle">
        <div className="content">
          <div className="info">
            {
              combatList.map((battle, index) => (<ReplayItem data={battle} gameName = {gameName} showDetail={showDetail} replay={this.toGameBattle.bind(this, battle)} detail={this.showBattleDetails.bind(this, battle)} index={index + 1} key={index}></ReplayItem>))
            }
            {
              combatList.length === 0 && !loading ? <div className="empty-tip">暂无记录</div> : null
            }
          </div>
        </div>
      </div>
      <div className="usercenter-bottom">
        <img className="bar" src="img/battle/round-record.png" alt=""/>
        <img className="user-bottom-bg" src="img/userCenter/user-bottom-bg.png" alt=""/>
        <NavLink to={toLink}><img className="back" src="img/userCenter/user-back.png" alt=""/></NavLink>
      </div>
      { this.state.showModal ? <div className="dialog-block has-mask full">
        <div className="round-mall-content content">
          <div className="full-width title-wrapper">
            <img className="dialog-title" src="img/battle/record-details.png" />
            <img onClick={() => this.setState({ showModal: false })} className="close" src="img/mall/dialog/close.png" alt="" />
          </div>
          <div className="modal-wrapper">
            <div className="round-modal-content">
              <table className="round-table">
                <thead>
                  <tr className="round-thead-row">
                    <td><img src="img/battle/icon-title.png" alt="" /></td>
                    <td><img src="img/battle/nickname.png" alt="" /></td>
                    <td><img src="img/battle/suit-pattern.png" alt="" /></td>
                    <td><img src="img/battle/score.png" alt="" /></td>
                  </tr>
                </thead>
                <tbody>
                  {
                    this.state.tableItem.map((item, i) => {
                      console.warn(item)
                      return <tr key={i} className="round-table-row">
                        <td width="16%" className="trow-icon"><span className="round-icon-wrapper"><img className="round-icon-frame" src="img/battle/icon-frame.png"/><img className="round-icon" src={item.headUrl} alt="" /></span></td>
                        <td width="18%">{item.nickname}</td>
                        <td width="46%">
                          <span className="pattern-wrapper">
                            {
                              item.handList.map((pattern, index)=>{
                                return <img src={`img/battle/patterns/${pattern.cardIndex}.png`}/>
                              })
                            }
                          </span>
                        </td> 
                        <td width="20%">{item.point}</td>
                      </tr>
                    })
                  }
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div> : null
      }
    </div>)
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(RoundReplay)